<template>
  <el-form class="demo-dynamic">
    <el-row>
      <el-col :span="3">姓名</el-col>
      <el-col :span="10" class="ml15">电话</el-col>
    </el-row>
    <el-row v-for="(domain, index) in userArr" :key="index">
        <el-col :span="3"><el-input v-model="domain.name"></el-input></el-col>
        <el-col class="ml15" :span="7"><el-input v-model="domain.mobile"></el-input></el-col>
        <el-button class="ml15" @click.prevent="removeDomain(domain)" type="danger">删除</el-button>
        <el-button @click.prevent="changeUser(index)" type="success">保存</el-button>
    </el-row>
    <!--<el-form-item-->
      <!--:key="domain.key"-->
      <!--:prop="'domains.' + index + '.value'"-->
      <!--:rules="[{-->
      <!--required: true, message: '域名不能为空', trigger: 'blur'-->
    <!--},{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' }]"-->
    <!--&gt;-->
      <!--<el-col :span="3"><el-input></el-input></el-col>-->
      <!--<el-col class="ml15" :span="7"><el-input v-model="domain.value"></el-input></el-col>-->
      <!--<el-button class="ml15" @click.prevent="removeDomain(domain)" type="danger">删除</el-button>-->
      <!--<el-button @click.prevent="removeDomain(domain)" type="success">保存</el-button>-->
    <!--</el-form-item>-->
    <el-form-item>
      <el-button @click="addDomain" type="primary">新增用户</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import server from '../../../service/count';

  export default {
    data() {
      return {
        userArr: [],
      };
    },
    mounted() {
      this.getUserList();
    },
    methods: {
      getUserList() {
        server.getUserPhone().then((res) => {
          this.userArr = res;
        });
      },
      removeDomain(item) {
        const index = this.userArr.indexOf(item);
        if (index !== -1) {
          if (item.id) {
            this.$confirm('确认要删除该用户?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              server.deleteUserPhone({ id: item.id }).then((res) => {
                this.userArr.splice(index, 1);
                this.$message({
                  message: res,
                  type: 'success',
                });
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除',
              });
            });
          } else {
            this.userArr.splice(index, 1);
          }
        }
      },
      addDomain() {
        this.userArr.push({
          name: '',
          mobile: '',
        });
      },
      changeUser(index) {
        const that = this;
        const thisUser = this.userArr[index];
        if (/^1[34578]\d{9}$/.test(thisUser.mobile)) {
          if (thisUser.id) {
            server.editUserPhone(thisUser).then((res) => {
              this.$message({
                message: res,
                type: 'success',
              });
            });
          } else {
            server.addUserPhone(thisUser).then((res) => {
              server.getUserPhone().then((getres) => {
                that.userArr[index] = getres[index];
              });
              this.$message({
                message: res,
                type: 'success',
              });
            });
          }
        } else {
          this.$message.error('请填写正确的电话号码！');
        }
      },
    },
  };
</script>

<style scoped>
  .ml15{
    margin-left: 15px;
  }
  .el-row{
    margin-bottom: 15px;
  }

</style>
